<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :xs="9" :sm="6" :md="5" :lg="4" :xl="4">
        <div class="head-container">
          <el-input
            v-model="filterUnit"
            clearable
            prefix-icon="el-icon-search"
            placeholder="请输入调度单位名称"
          />
        </div>
        <el-tree
          ref="tree"
          :data="unitNames"
          :load="getUnitData"
          :node-key="id"
          :props="defaultProps"
          :filter-node-method="filterNode"
          highlight-current="true"
          lazy
          expand-on-click-node="false"
          @node-clik="handleNodeClick"
        />
      </el-col>

      <el-col :xs="15" :sm="18" :md="19" :lg="20" :xl="20">
        <div class="head-container">
          <div v-if="crud.props.searchToggle">
            <!-- 搜索 -->
            <el-input v-model="query.name" clearable size="small" placeholder="输入系统名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
            <rrOperation />
          </div>
          <crudOperation :permission="permission" />
        </div>
        <!--表单组件-->
        <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
          <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
            <el-form-item label="系统编号" prop="number">
              <el-input v-model="form.number" style="width: 350px;" />
            </el-form-item>
            <el-form-item label="系统名称" prop="name">
              <el-input v-model="form.name" style="width: 350px;" />
            </el-form-item>
            <el-form-item label="上级稳控系统" prop="supSystem">
              <el-input v-model="form.supSystem" style="width: 350px;" />
            </el-form-item>
            <el-form-item label="系统管理单位" prop="sysMangeUnit">
              <el-input v-model="form.sysMangeUnit" style="width: 350px;" />
            </el-form-item>
            <el-form-item label="调度机构" prop="unit">
              <el-input v-model="form.unit" style="width: 350px;" />
            </el-form-item>
            <el-form-item label="区域" prop="area">
              <el-input v-model="form.area" style="width: 350px;" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="crud.cancelCU">取消</el-button>
            <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
          </div>
        </el-dialog>
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="number" label="自定义编号" />
          <el-table-column prop="name" label="稳控系统名称">
            <template slot-scope="scope">
              <el-tag size="small">{{ scope.row.name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="supSystem" label="上级稳控系统" />
          <el-table-column prop="sysMangeUnit" label="系统管理单位">
            <template slot-scope="scope">
              <el-tag type="success" size="small">{{ scope.row.sysMangeUnit }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="unitId" label="调度机构" />
          <el-table-column prop="area" label="区域" />
          <el-table-column v-if="checkPer(['admin','control:edit','control:del'])" label="操作" width="150px" align="center">
            <template slot-scope="scope">
              <udOperation
                :data="scope.row"
                :permission="permission"
              />
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import crudControl from '@/api/system/control'
  import crudDisUnit from '@/api/system/disunit'
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'

  const defaultForm = { number: null, name: null, supSystem: null, sysMangeUnit: null, unit: null, area: null }
  export default {
    name: 'Control',
    components: { pagination, crudOperation, rrOperation, udOperation },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    cruds() {
      return CRUD({ title: '稳控系统', url: 'api/sysStabilityControl', idField: 'controlId', sort: 'controlId,desc', crudMethod: { ...crudControl }})
    },
    data() {
      return {
        filterUnit: '',
        unitNames: [], // 调度单位数组
        units: [],
        defaultProps: { label: 'name', value: 'id' },
        permission: {
          add: ['admin', 'control:add'],
          edit: ['admin', 'control:edit'],
          del: ['admin', 'control:del']
        },
        rules: {
          number: [
            { required: true, message: '系统编号不能为空', trailing: 'blur' }
          ],
          name: [
            { required: true, message: '系统名称不能为空', trigger: 'blur' }
          ],
          sysMangeUnit: [
            { required: true, message: '系统管理单位不能为空', trigger: 'blur' }
          ],
          unit: [
            { required: true, message: '调度机构不能为空', trigger: 'blur' }
          ],
          area: [
            { required: true, message: '区域不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    watch: {
      filterUnit(val) {
        this.$refs.tree.filter(val)
      }
    },
    // created() {
    //   this.getUnitNames()
    // },
    methods: {
      // 对树中的数据进行搜索
      filterNode(value, unitNames) {
        if (!value) return true
        return unitNames.name.indexOf(value) !== -1
      },
      // 钩子：在获取表格数据之前执行，false 则代表不获取数据
      [CRUD.HOOK.beforeRefresh]() {
        return true
      },
      // getUnitNames() {
      //   const params = null
      //   crudDisUnit.getDisUnits(params).then(res => {
      //     this.unitNames = res.content
      //   }).catch(() => { })
      // },
      // 懒加载树的子节点
      getUnitData(node, resolve) {
        const params = { }
        if (typeof node !== 'object') {
          if (node) {
            params['name'] = node
          }
        } else if (node.level !== 0) {
          params['pid'] = node.data.id
        }
        setTimeout(() => {
          crudDisUnit.getDisUnits(params).then(res => {
            if (resolve) {
              resolve(res.content)
            } else {
              this.unitNames = res.content
            }
          })
        }, 100)
      }
    }
  }
</script>

<style scoped>

</style>
